import React, {
    Component
} from "react";
import '../../../assets/stylus/common.styl';
import {
    stubCfgInfo,
    stubCfgSync,
    platformCfgSave,
    stubCfgCheck
} from "../../../fetch/fetchApi";
import {
    Button,
    Input,
    Row,
    Col,
    message,
    Spin,
    Card,
    Table,
    Tooltip,
    Modal
} from 'antd';

import {
    ConfigModify,
    filePath
} from './configModify';
import ModifyLog from './modifyLog';

class StubParamsConfig extends Component {
    constructor(props) {
        super(props);
        this.init();
        this.state = {
            cfgData: {},
            data: []
        };
    }

    init() {
        this.stubRecord = window.LayoutTab.tabParam.stubRecord;
        this.tableColumns = [{
            title: '参数字段',
            dataIndex: 'name',
            width: 200
        }, {
            title: '设备端参数',
            dataIndex: 'device',
            render: (text, record) => (
                <div>
                    <Tooltip placement="topLeft" title={text} >
                        {text ? (text.length > 50 ? text.substring(0, 50) + "..." : text) : text}
                    </Tooltip>
                </div>
            )
        }, {
            title: '平台参数',
            dataIndex: 'platform',
            render: (text, record) => (
                <div>
                    <Tooltip placement="topLeft" title={text} >
                        {text ? (text.length > 50 ? text.substring(0, 50) + "..." : text) : text}
                    </Tooltip>
                </div>
            )
        }]
    }

    handleModifyBtnClick = () => {
        this.setState({
            configModifyVisible: true,
            //stubId: "10004114"
            stubId: this.stubRecord.stubId
        })
    }

    fetch() {
        this.setState({
            tableLoading: true
        })
        stubCfgInfo({
            stubId: this.stubRecord.stubId
            //stubId: "10004114"
        }).then((res) => {
            if (res && res.data.code === "200") {
                let allParams = [];
                const platformConfig = res.data.data.platformConfig;
                const stubConfig = res.data.data.stubConfig;
                // 取两个config的并集
                const allItems = [];
                platformConfig && platformConfig.map((item, index) => {
                    item.children.map((childItem, childIndex) => {
                        allItems.push(childItem);
                    })
                })

                stubConfig && stubConfig.map((item, index) => {
                    item.children.map((childItem, childIndex) => {
                        let arr = allItems.filter((item1) => item1.id === childItem.id);
                        if (arr.length === 0) {
                            allItems.push(childItem);
                        }
                    })
                })

                // 组成新的数组
                allItems.map((item, index) => {
                    let isPlatformConfigHas = false;
                    platformConfig && platformConfig.map((item1, index1) => {
                        item1.children.map((childItem, childIndex) => {
                            if (childItem.id === item.id) {
                                childItem.platform = childItem.value;
                                allParams.push(childItem);
                                isPlatformConfigHas = true
                            }
                        })
                    })
                    if (!isPlatformConfigHas) {
                        item.platform = "";
                        allParams.push(item);
                    }


                })

                allParams.map((item, index) => {
                    stubConfig && stubConfig.map((item1, index1) => {
                        item1.children.map((childItem, childIndex) => {
                            if (childItem.id === item.id) {
                                item.device = childItem.value;
                            }
                        })
                    })
                })

                const dataParamsArr = [];
                // 参数不一致的放在前面
                allParams.map((item, index) => {
                    if (item.device && item.platform && item.device.toString() !== item.platform.toString()) {
                        dataParamsArr.push(item);
                    }
                })

                allParams.map((item, index) => {
                    if (item.device && item.platform && item.device.toString() === item.platform.toString()) {
                        dataParamsArr.push(item);
                    }
                })

                this.setState({
                    cfgData: res.data.data,
                    data: dataParamsArr
                })
            }
            this.setState({
                tableLoading: false
            })
        })
    }

    componentDidMount() {
        this.fetch();
    }

    handleModifyLogBtnClick = () => {
        this.setState({
            configModifyLogVisible: true,
            stubId: this.stubRecord.stubId,
            isNeedFlush: true
        })
    }

    handleConfigModifyCancelClick = () => {
        this.setState({
            configModifyVisible: false
        })
    }

    handleConfigModifyOkClick = () => {
        console.log(filePath + this.selectedRow.id);
        const cfgData = this.state.cfgData;
        this.setState({
            configModifyBtnLoading: true
        })
        platformCfgSave({
            fileId: filePath + this.selectedRow.id,
            stubId: this.stubRecord.stubId,
            version: cfgData && cfgData.platformConfigVersion
        }).then((res) => {
            if (res && res.data.code === "200") {
                message.success("保存成功！");
                this.fetch();
            }
            this.setState({
                configModifyBtnLoading: false,
                configModifyVisible: false
            })
        })
    }

    handleModifyLogOkClick = () => {

    }

    handleModifyLogCancelClick = () => {
        this.setState({
            configModifyLogVisible: false
        })
    }

    handleConfigCheckClick = () => {
        this.setState({
            checkBtnLoading: true
        })
        stubCfgCheck({
            stubId: this.stubRecord.stubId
        }).then((res) => {
            if (res && res.data.code == "200") {
                message.success("操作成功！");
                this.fetch();
            }
            this.setState({
                checkBtnLoading: false
            })
        })
    }

    handleSyncBtnClick = () => {
        stubCfgSync({
            stubId: this.stubRecord.stubId
        }).then((res) => {
            if (res && res.data.code === "200") {
                message.success("操作成功！");
                this.fetch();
            }
        })
    }

    handleModifyLog = (isNeedFlush) => {
        this.setState({
            isNeedFlush: isNeedFlush
        })
    }

    handleConfigModify = (selectedRow) => {
        this.selectedRow = selectedRow
    }

    render() {
        const textAlign = {
            textAlign: 'center',
        };
        const marginTop = {
            marginTop: '20px'
        }
        const content = <div>
            <Row>
                <Col span={3} offset={1}>
                    <label>电桩编号：</label>   
                    <span>{this.stubRecord.stubId}</span>                 
                </Col>
                <Col span={5} offset={2}>
                    <label>电站名称：</label>   
                    <span>{this.stubRecord.stubGroupName}</span>                 
                </Col>
            </Row>
            <Row style={marginTop}>
                <Col span={10} offset={1}>
                    <Card style={textAlign}>
                        <div>
                            <label>设备校验码：</label>  
                            <span>{this.state.cfgData.stubConfigCRC||"--"}</span>
                        </div> 
                        <div style={marginTop}>
                            <label>设 备 变 更：</label>  
                            <span>{this.state.cfgData.stubConfigModifyTime||"--"}</span>
                        </div> 
                        <div style={marginTop}>
                            <label>修 改 方 式：</label>  
                            <span>{this.state.cfgData.stubConfigModifyType||"--"}</span>
                        </div>
                    </Card>
                </Col>
                <Col span={10} offset={1}>
                    <Card style={textAlign}>
                        <div>
                            <label>平台校验码：</label>  
                            <span>{this.state.cfgData.platformConfigCRC||"--"}</span>
                        </div> 
                        <div style={marginTop}>
                            <label>平 台 变 更：</label>  
                            <span>{this.state.cfgData.platformConfigModifyTime||"--"}</span>
                        </div>
                        <div style={marginTop}>
                            <label>同 步 状 态：</label>  
                            <span style={{'color':'blue'}}>{(this.state.cfgData.stubConfigCRC&&this.state.cfgData.platformConfigCRC)?(this.state.cfgData.stubConfigCRC===this.state.cfgData.platformConfigCRC?"已同步":"未同步"):'--'}</span>
                        </div>
                    </Card>
                </Col>
            </Row>
            <Row style={marginTop}>
                <Col span={3} offset={1}>
                    <label>配置信息</label>           
                </Col>
                <Col span={9} offset={9} style={{'textAlign': 'right'}}>
                    <Button loading={this.state.checkBtnLoading} onClick={this.handleConfigCheckClick}>配置校验</Button>        
                    <Button style={{'marginLeft':'10px'}} onClick={this.handleModifyBtnClick}>配置修改</Button>        
                    <Button style={{'marginLeft':'10px'}} onClick={this.handleSyncBtnClick}>配置同步</Button>        
                    <Button style={{'marginLeft':'10px'}} onClick={this.handleModifyLogBtnClick}>变更记录</Button>        
                </Col>
            </Row>
            <Row style={marginTop}>
                <Col span={21} offset={1}>
                    <Table loading={this.state.tableLoading} rowClassName={(record)=>{return record.device && record.platform && record.device.toString() !== record.platform.toString()&&'columnStyle'}} columns={this.tableColumns} dataSource={this.state.data} pagination={false} bordered/>
                </Col>
            </Row>
            <Modal width='800px' confirmLoading={this.state.configModifyBtnLoading} visible={this.state.configModifyVisible} onOk={this.handleConfigModifyOkClick} onCancel={this.handleConfigModifyCancelClick}>
                <ConfigModify stubId={this.state.stubId} handle={this.handleConfigModify}/>
            </Modal>
            <Modal width='800px' footer={null} visible={this.state.configModifyLogVisible} onOk={this.handleModifyLogOkClick} onCancel={this.handleModifyLogCancelClick} title={'变更记录'}>
                <ModifyLog isNeedFlush={this.state.isNeedFlush} id={this.state.stubId} handle={this.handleModifyLog}/>
            </Modal>
        </div>
        return content;
    }
}
export default StubParamsConfig;